<template>
   <el-dialog title="外层 Dialog" :close-on-click-modal="false" :show-close="false" :visible.sync="outerVisible">

     <!-- 内层弹出框start -->
      <el-dialog
        width="30%"
        title="内层 Dialog"
        :visible.sync="innerVisible"
        append-to-body
        :show-close="false"
        :close-on-click-modal="false"
        >

         <!-- 包含一个form表单 -->
        <BaseForm></BaseForm>
        <el-button @click="handleInnerClose">取 消</el-button>
        <el-button type="primary" @click="handleInderSure">确 定</el-button>
      </el-dialog>
       <!-- 内层弹出框end -->

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleOuterClose">取 消</el-button>
        <el-button type="primary" @click="handleOuterSure">打开内层 Dialog</el-button>
      </div>
  </el-dialog>
</template>

<script>
/**
 *  可复用 / 可维护 / 可读性
 *
 *  实现6个字：高内聚 / 低耦合
 *
 *  子组件一般负责 ui渲染
 *  逻辑放在父组件中，
 *  通过子父通信实现组件变更
 *  通过父子组件通信把数据传入子组件
 *
 *  props:  参数校验
 *  event:
 *
 */
import BaseForm from '../BaseForm/index'
export default {
  components: { BaseForm },
  props: {
    outerVisible: {
      type: Boolean,
      default: false
    },
    innerVisible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleInnerClose() {
      this.$emit('handleInnerClose')
    },
    handleInderSure() {
      this.$emit('handleInderSure')
    },
    handleOuterClose() {
      this.$emit('handleOuterClose')
    },
    handleOuterSure() {
      this.$emit('handleOuterSure')
    }
  }
}
</script>

<style>

</style>
